<template>
	<view class="page-content">
		<view class="index-header">
			<!--导航-->
			<view class="nav">
				<view class="nav-item" @click="handleActive(1)" :class="[active === 1 ? 'active' : '']">打卡信息
				</view>
				<view class="nav-item" @click="handleActive(2)" :class="[active === 1 ? '' : 'active']">赛事详情
				</view>
			</view>
		</view>
		<view class="page-body">
			<!--列表-->
			<view v-if="datalist">
				<!--报名中-->
				<view class="body-item" v-if="active===1">
					<view class="body-box">
						<view class="box-tit">
							<image class="icon-dt" src="../../static/clockIn/address.png" />
							打卡码<text class="tit-text">（提示：该打卡码只针对本次比赛）</text>
						</view>
						<view class="box-con">
							<image class="box-ewm" :src="datalist.ewm"></image>
						</view>
					</view>
					<view class="body-box">
						<view class="box-tit">
							<image class="icon-dw" src="../../static/clockIn/team.png" />
							<text class="txt-jc">团队名称 ：{{datalist.teamname}}（{{datalist.clock_num}}人）</text>
						</view>
						<!--队长-->
						<view class="box-team">
							<view class="box-team-l">
								<image class="icon-dz" src="../../static/clockIn/captain.png" />
								队长：
								<image class="icon-tx" :src="datalist.captain.head" />
								<text class="box-team-l-name">{{datalist.captain.name}}</text>{{datalist.captain.pho}}
							</view>
							<view class="box-team-r" @click="callpho1(datalist.captain.pho)">
								<image class="icon-dh" src="../../static/clockIn/pho.png" />
								<view>拨号</view>
							</view>
						</view>
						<!--队员-->
						<view class="box-team2">
							<block v-for="(item,index) in datalist.team_m" :key="index">
								<view class="box-team-li">
									<view class="box-team-l">
										<!-- <image class="icon-dy" src="../../static/clockIn/captain.png" /> -->队员：
										<image class="icon-tx" :src="item.head" />
										<text
											class="box-team-l-name">{{item.name}}</text>{{item.pho}}
									</view>
									<view class="box-team-r" @click="callpho2(item.pho)">
										<image class="icon-dh" src="../../static/clockIn/pho.png" />
										<view>拨号</view>
									</view>
							
								</view>
							</block>
						</view>
					</view>
					<!--打卡记录-->
					<view class="body-box">
						<view class="box-tit">
							<image class="icon-dt" src="../../static/clockIn/address.png" />
							打卡记录<text class="tit-text">（提示：XXXXXXXXXXX）</text>
						</view>
						<view class="box-clockIn">
							<block v-for="(item,index) in datalist.record" :key="index">
								<record-info :record="item" @click="onclick"></record-info>
							</block>
						</view>
					</view>
				</view>
				<!--报名结束-->
				<view class="body-item" v-if="active===2">

				</view>
			</view>
			<!--无数据-->
			<empty v-else no-full type="noData"></empty>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	import recordInfo from './components/record_info.vue'
	export default {
		components: {recordInfo},
		data() {
			return {
				active: 1, //tab导航
				datalist: {
					statu: '2',
					ewm: '',
					title: '2021春季城市穿越大型2021春季城市穿越大型',
					time: '2021/04/07 08:00',
					teamname: '秋名山战神队',
					clock_sta: '2',
					clock_num: '6',
					clock_on_num: '3',
					captain: {
						head: '',
						name: '亚克托斯',
						pho: '13583948345',
					},
					team_m: [],
					record:[
						{
							no:'qd',
							clock_sta: '2',
							clock_address: '观音山商务中心打卡点1',
							time: '2021/04/07 08:00',
							img_url:'',
							teamname: '秋名山战神队'
						},{
							no:'xx',
							clock_sta: '2',
							clock_address: '观音山商务中心打卡点2',
							time: '2021/04/07 08:00',
							img_url:'',
							teamname: '秋名山战神队'
						},{
							no:'xx',
							clock_sta: '1',
							clock_address: '观音山商务中心打卡点3',
							time: '2021/04/07 08:00',
							img_url:'',
							teamname: '秋名山战神队'
						},{
							no:'zd',
							clock_sta: '1',
							clock_address: '观音山商务中心打卡点4',
							time: '2021/04/07 08:00',
							img_url:'',
							teamname: '秋名山战神队'
						},
					]
				},

			}
		},
		computed: {
			...mapState(['hasLogin'])
		},
		onLoad(option) {
			console.log(123,option)
		},
		methods: {
			callpho1(pho){
				uni.makePhoneCall({
				    phoneNumber: pho
				});
			},
			callpho2(pho){
				uni.makePhoneCall({
				    phoneNumber: pho
				});
			},
			handleActive(e) {
				this.active = e
			},
			//跳转比赛详情
			clickdet(type, item) {
				uni.navigateTo({
					url: `/pages/index/race_detail?type=${type}&data=${JSON.stringify(item)}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.sign_no{
		background-color: #eee;
		color: #333;
	}
	.sign_on{
		background-color: #02BB6F;
		color: #fff;
	}
	.icon-dz-address{
		width: 71rpx;
		height:82rpx;
		margin-right: 10rpx;
	}
	.icon-dt {
		width: 22rpx;
		height: 28rpx;
		margin-right: 18rpx;
	}

	.icon-dw {
		width: 28rpx;
		height: 24rpx;
		margin-right: 18rpx;
	}

	.icon-dz {
		width: 34rpx;
		height: 26rpx;
		margin-right: 18rpx;
	}
	.icon-dy{
		width: 32rpx;
		height:32rpx;
		margin-right:15rpx;
	}

	.icon-dh {
		width: 22rpx;
		height: 24rpx;
		margin-right: 5rpx;
	}

	.icon-tx {
		width: 30rpx;
		height: 30rpx;
		border-radius: 15rpx;
		margin-right: 12rpx;
	}

	.page-body {
		height: calc(100vh - 73rpx);

		.body-item {
			margin: 0;

			.body-box {
				background-color: #fff;
				display: flex;
				flex-direction: column;
				margin-bottom: 20rpx;
				padding: 30rpx 32rpx;
				.box-team2{
					display: flex;
					flex-direction: column;
					.box-team-li{
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 28rpx;
						font-weight: 500;
						color: #333333;
						margin-bottom: 30rpx;
						
						.box-team-l {
							display: flex;
							align-items: center;
							margin-left: 50rpx;
						
							.box-team-l-name {
								margin-right: 10rpx;
							}
						}
						
						.box-team-r {
							display: flex;
							align-items: center;
							color: #02BB6F;
						}
					}
				}
				.box-team2.box-team-li:nth-of-type(2) .box-team-l.icon-dy{
					display: none!important;
				}

				.box-team {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
					margin-bottom: 30rpx;

					.box-team-l {
						display: flex;
						align-items: center;

						.box-team-l-name {
							margin-right: 10rpx;
						}
					}

					.box-team-r {
						display: flex;
						align-items: center;
						color: #02BB6F;
					}
				}

				.box-tit {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
					margin-bottom: 30rpx;

					.tit-text {
						color: #FE5050;
					}

					.txt-jc {
						font-weight: bold;
					}
				}

				.box-con {
					display: flex;
					justify-content: center;
					align-items: center;

					.box-ewm {
						width: 246rpx;
						height: 246rpx;
					}
				}
			}
		}
	}

	.page-content {
		height: 100vh;
		width: 100vw;
		display: flex;
		flex-direction: column;
	}

	.index-header {
		width: 100%;
		height: 73rpx;
		background-color: #f5f5f5;

		.nav {
			height: 73rpx;
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			text-align: center;
			font-size: 28rpx;
			color: #999;

			.nav-item {
				flex: 1;
				position: relative;

				&::after {
					content: '';
					width: 0;
					height: 8rpx;
					background-color: #02BB6F;
					border-radius: 4px;
					position: absolute;
					left: 50%;
					bottom: -12rpx;
					transform: translateX(-50%);
					transition: .3s;
				}

				&.active {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;

					&::after {
						width: 60rpx;
					}
				}
			}
		}
	}
</style>
